<template>
  <div class="box lowcode">
    <div class="head">
      <div class="left">
        <el-button type="primary" icon="back" size="small" @click="goback">{{
          $t("common.back")
        }}</el-button>
      </div>
      <div class="center">
        <!-- 配方配置 -->
        <div class="toggle">
          <div
            v-for="item of navs"
            :class="['item', editType == item.type ? 'active' : '']"
            @click="toggleEdit(item.type)"
          >
            {{ $t(item.name) }}
          </div>
        </div>
      </div>
      <div class="right">
        <el-button
          type="primary"
          icon="Select"
          size="small"
          @click="save"
          :loading="loading"
          >提交审核</el-button
        >
      </div>
    </div>
    <div class="body" v-loading="loading">
      <div class="left">
        <materialList />
      </div>
      <div class="center">
        <div class="nav toggle">
          <div
            :class="['item', active == 2 ? 'active' : '']"
            @click="toggle(2)"
          >
            2d {{ $t("editFormula.edit") }}
          </div>
          <div
            :class="['item', active == 3 ? 'active' : '']"
            @click="toggle(3)"
          >
            3d {{ $t("editFormula.preview") }}
          </div>
        </div>
        <editCanvas v-if="active == 2" />
        <editPreview v-else />
      </div>
      <div class="right" @mouseover="preover" @mouseout="preout">
        <div class="mask" v-show="preNot">3D预览中不可修改</div>
        <configSide />
      </div>
    </div>
  </div>
</template>
<script setup>
import { useRouter, useRoute } from "vue-router";
import materialList from "./materialList/index.vue";
import configSide from "./configSide/index.vue";
import editCanvas from "./editCanvas/index.vue";
import editStore from "../../store/editStore";
import userStore from "@/store/userStore";
import editPreview from "./preview-3d/index.vue";
import { computed, ref } from "vue";
import { useI18n } from "vue-i18n";
import { postRecipe, putRecipe } from "@/api/recipe";
import { getGUID } from "@/utils";
import useStoreToData from "@/hooks/useStoreToData";
import getEnvConfig from "@/config/axios/getEnvConfig";

let navs = [
  // { name: "editFormula.reel", type: "reel" },
  // { name: "editFormula.tray", type: "tray" },
  { name: "editFormula.packageBag", type: "package" },
  { name: "editFormula.innerBox", type: "innerBox" },
];

if (getEnvConfig.VITE_EQUIP_MODE == "REEL") {
  navs.unshift({ name: "editFormula.reel", type: "reel" });
} else if (getEnvConfig.VITE_EQUIP_MODE == "TRAY") {
  navs.unshift({ name: "editFormula.tray", type: "tray" });
}

const { t: $t } = useI18n();
const router = useRouter();
const route = useRoute();
const Store = editStore();
const userInfo = userStore();
//获取所有物料
Store.getAllMaterial();
//获取所有标签模板
Store.getAllLabelTemplate();

let editType = computed(() => Store.editType);

let active = ref(2);
let loading = ref(false);
let preNot = ref(false);

let copydata = sessionStorage.getItem("copyData");
if (route.query?.type == "add" && copydata) {
  copydata = JSON.parse(copydata);
  ElMessageBox.confirm(`是否使用当前复制的配方数据?`, "提示", {
    confirmButtonText: "确 定",
    cancelButtonText: "取 消",
    type: "warning",
  })
    .then(() => {
      copydata.id = getGUID();
      copydata.recipe.recipeNo = 0;
      copydata.recipe.recipeName = "";
      Store.$state = copydata;
      sessionStorage.removeItem("copyData");
    })
    .catch(() => {
      sessionStorage.removeItem("copyData");
    });
}

function goback() {
  router.go(-1);
}

function toggleEdit(type) {
  active.value = 2;
  Store.changeEditType(type);
  if (type == "reel") {
    Store.changeSelectedComponent({ id: "reel", type: "reel" });
  } else if (type == "package") {
    Store.changeSelectedComponent({ id: "package", type: "package" });
  } else if (type == "innerBox") {
    Store.changeSelectedComponent({ id: "InnerBox", type: "InnerBox" });
  }
}

function toggle(num) {
  active.value = num;
}

async function save() {
  Store.changeSelectedComponent({});
  let jsonData = JSON.parse(JSON.stringify(Store.$state));
  let data = useStoreToData(jsonData);
  loading.value = true;
  let res = "";
  try {
    if (route.query.type == "add") {
      data.creatorName = userInfo.authUser.user.userName;
      res = await postRecipe(data);
    } else if (route.query.type == "edit") {
      data.lastModifierName = userInfo.authUser.user.userName;
      res = await putRecipe(data);
    }
    if (res) {
      ElMessage.success("提交成功");
      router.push({
        path: "/home",
      });
    } else {
      ElMessage.error("提交失败");
    }
    loading.value = false;
  } catch (e) {
    ElMessage.error("提交失败");
    loading.value = false;
  }
}

function preover() {
  active.value == 3 && (preNot.value = true);
}

function preout() {
  preNot.value = false;
}
</script>

<style lang="scss" scoped>
$height: 50px;
.box {
  width: 100vw;
  height: 100vh;
  color: #bbb;
  .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: $height;
    padding: 0 20px;
    border-bottom: 1px solid #d9d9d9;
    .center {
      display: flex;
      align-items: center;
    }
  }
  .body {
    height: calc(100% - $height);
    display: flex;
    justify-content: space-between;
    user-select: none;
    overflow: hidden;
    .left {
      width: 350px;
    }
    .center {
      width: calc(100% - 700px);
      height: 100%;
      overflow: hidden;
      position: relative;
      .nav {
        position: absolute;
        top: 5px;
        right: 5px;
        z-index: 999;
      }
    }
    .right {
      position: relative;
      width: 350px;
      .mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        background-color: rgba(50, 50, 52, 0.5);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        z-index: 10;
        cursor: not-allowed;
      }
      &:hover {
        .mask {
          opacity: 1;
        }
      }
    }
  }
  .toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 10px;
    background-color: rgb(238 238 238 / 30%);
    height: 36px;
    line-height: 36px;
    border-radius: 4px;
    font-size: 16px;
    padding: 0 10px;
    //max-width: 260px;
    margin: 0 auto;
    .item {
      min-width: 60px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      padding: 0 10px;
      cursor: pointer;
    }
    .active {
      color: #0084fe;
      background-color: #d3eafe;
      border-radius: 4px;
    }
  }
}
</style>
